<template>
    <div class="mains">
        <div class="login-contain">

<!--          <van-field v-model="text" label="文本" placeholder="请输入内容" />-->
          <div class="content-row">
            <div class="title player-sel">选棋</div>
            <div>
              <el-checkbox v-model="red_sel" @click="player_sel('R')" class="option red">红方</el-checkbox>
              <el-checkbox v-model="black_sel" @click="player_sel('B')" class="option black">黑方</el-checkbox>
            </div>
          </div>

          <div class="content-row">
            <div class="title">难度</div>
            <div>
              <el-select v-model="level" placeholder="请选择" size="large" class="level-sel" popper-class="level-popper">
                <el-option
                    v-for="item in level_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="content-row start-btn">
            <van-button type="primary" class="main-button" @click="start_chess">开始</van-button>
          </div>

<!--          <div>{{msg}}</div>-->
        </div>

    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import cookies from 'js-cookie'
const instance = getCurrentInstance()
let name=ref('')
let password=ref('')
const text = ref('选棋');
let red_sel = ref(true);
let black_sel = ref(false);

let level_options = ref([
  {"label":"初级", "value":"1"},
  {"label":"中级", "value":"2"},
  {"label":"高级", "value":"3"},
])
let level = ref('1');

let player = 'B'
let msg = ref(0)

const {commit} =useStore()
const router = useRouter()


function player_sel(player) {
  console.log("player_sel:", player)
  if ("R" == player && !red_sel.value) {
    black_sel.value = false;
  } else if ("B" == player && !black_sel.value) {
    red_sel.value = false;
  }
}

function check_active_piece (piece, row, col) {
  // return false;
  if (piece == "")
    return false;
  if (row == sel_row && col == sel_col) {
    return true;
  } else {
    return false;
  }
}

function start_chess() {
  console.log("start_chess:", red_sel.value, black_sel.value, level.value)
  let req_data = {
    red_sel: red_sel.value,
    level: level.value
  }

  instance.proxy.$http.post('/api/v2.0/start_ai_chess', req_data).then((res) => {
    let error = res.error
    if (error == 0) {
      ElMessage.success('棋局成功开始:')
      if (red_sel.value) {
        sessionStorage.setItem('player', '0');
      } else {
        sessionStorage.setItem('player', '1');
      }
      sessionStorage.setItem('match_id', res.match_id);
      router.push({
        name: 'Chess',
      })
    }

    // if (error == 0) {
    //   ElMessage.success('棋局成功开始:', res)
    //   // cookies.set('userid', val.username)
    //   // sessionStorage.setItem('tokenAddFun',res.token)
    //   // sessionStorage.setItem('userAddId',val.username)
    //   // commit('updateName',val.username)
    //   // router.push({
    //   //   name: 'Home',
    //   // })
    // }else{
    //
    //   ElMessage.error('error:' + error)
    //
    // }
  })

}

</script>

<style  scoped>
  .mains {
      /*background-image: url('../assets/bac.jpg');*/
      /*background-repeat: no-repeat;*/
      /*background-size: cover;*/
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
  }

  .content-row {
    font-size: 48px;
    display: flex;
    margin-left: 10px;
  }

  .content-row .title {
    margin-right: 40px;
  }

  .content-row .option ::v-deep .el-checkbox__inner {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important; /* 可选：调整圆角 */
  }

  .content-row .option ::v-deep .el-checkbox__inner::after {
    width: 6px !important;
    height: 10px !important;
    border-width: 2px !important;
  }


  .content-row .red ::v-deep .el-checkbox__label {
    font-size: 30px;
    color: red;
  }

  .content-row .black ::v-deep .el-checkbox__label {
    font-size: 30px;
    color: black;
  }

  /* 调整宽度和高度 */
  .level-sel {
    width: 160px !important;  /* 宽度 */
  }

  /* 调整输入框高度 */
  .level-sel ::v-deep .el-input__inner {
    height: 40px !important;
    line-height: 40px !important;
    font-size: 30px !important;
  }

  /* 调整下拉选项高度（可选） el-select-dropdown__item */
  .level-popper .el-select-dropdown__item {
    height: 56px !important;
    line-height: 36px !important;
    font-size: 30px !important;
  }

  .start-btn {
    display: flex;
    justify-content: center;
  }

  .main-button {
    height: 60px;
    width: 200px;
    font-size: 30px;
    margin-top: 20px;
  }

  .login-contain-xx{
      /*width: 578px;*/
      /*height: 350px;*/
      padding: 0px;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      align-self: center;
      /* background: #FFFFFF; */
      border-radius: 8px;
  }

  .panel button {
    margin-left: 20px;
  }

  /deep/ .el-input__inner{
      background-color: rgba(255,255,255,0) !important;
  }
  /deep/ .el-input__inner:-webkit-autofill{
      transition: background-color 5000s ease-in-out 0s;
  }
  /deep/ .el-input__inner:-webkit-autofill:focus{
      -webkit-text-fill-color: #333 !important;
  }
</style>
